<template>
    <div>
        <el-table :data="tableData"
                  @selection-change="selectionChangeHandle"
                  @row-click ="rowClickHandle"
                  v-loading="loading" stripe border :highlight-current-row="true"
                  max-height="542" style="width: 100%">

            <el-table-column type="index" :index="tableIndex" align="center" fixed="left" width="50"></el-table-column>

            <el-table-column property="username" align="center" label="用户名"></el-table-column>

            <el-table-column property="role" align="center" label="用户角色">
                <template slot-scope="scope">
                    {{scope.row.role|roleFilter}}
                </template>
            </el-table-column>

            <el-table-column property="outId" align="center" label="外部id"></el-table-column>

            <el-table-column property="nickname" align="center" label="昵称"></el-table-column>

            <el-table-column property="status" align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status==='ENABLED'?'success':'info'">{{ scope.row.status |statusFilter}} </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    property="createTime"
                    align="center"
                    label="创建日期">
                <template slot-scope="scope">
                    {{scope.row.createTime|datetimeFormat}}
                </template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="190">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="editHandle(scope.row)">修改</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div class="pagination">
            <el-pagination
                    @current-change="currentChangeHandle"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    /**
     * 用户列表
     * @author Canaan
     * @date 2019/7/25 15:39.
     */
    export default {
        name: 'UserInfoTable',
        mounted() {
            this.loadData();
        },
        components: {},
        props: {
            searchParam: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                pageNo: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                loading: false,
            }
        },
        computed: {},
        methods: {

            /**
             * 表格索引排序
             * @author Canaan
             * @date 2019/3/7 17:09
             */
            tableIndex(index) {
                if (this.pageNo <= this.total / this.pageSize) {
                    return index + this.pageSize * (this.pageNo - 1) + 1;
                }
                //重新调整当前页面重新调整
                if (this.total % this.pageSize === 0) {
                    this.pageNo = parseInt(this.total / this.pageSize);
                } else {
                    this.pageNo = parseInt(this.total / this.pageSize) + 1;
                }

                return index + this.pageSize * (this.pageNo - 1) + 1;
            },
            currentChangeHandle(val) {
                this.pageNo = val;
                this.loadData();
            },
            /**
             * 表格选中处理
             */
            selectionChangeHandle: function (selection) {
                this.$emit('selectionChange', selection);
            },
            /**
             * 行选中
             */
            rowClickHandle:function (row, event, column) {
                this.$emit('rowClick', row, event, column);
            },
            loadData() {
                let params = Object.assign({
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                }, this.searchParam);
                this.loading = true;
                this.$ajax.get('user_info/paging', {
                    params: params
                }).then(res => {
                    this.loading = false;
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                });
            },
            /**
             * 修改
             * @author Canaan
             * @date 2019/7/22 15:35
             */
            editHandle(row) {
                this.$emit('onEdit', row);
            }
        },
        watch: {},
        filters: {
            statusFilter(val) {
                switch (val) {
                    case "ENABLED":
                        return "可用";
                    default:
                        return val;
                }
            }
        },
        beforeDestroy() {
        }
    }
</script>

<style scoped>

</style>